<!-- 商品列表页 -->
<template>
	<view>
		<!-- 轮播图 -->
		<view class="banner">
			<u-swiper class='banner-swiper' height="500rpx" :list="bannerList" indicator indicatorMode="dot" circular>
			</u-swiper>
		</view>
		<view class="main">
			<!-- 左侧菜单 -->
			<view class="left-menu">
				<ul>
					<li v-for="(item,index) in shopSortList" :key="index" @click='selectSort(index)'
						:class="{ selected: index == isSelected}">
						<text>{{ item.name }}</text>
					</li>
				</ul>
			</view>
			<!-- 右侧商品列表 -->
			<view class="right-con">
				<ul>
					<li v-for="(item,index) in shopList" :key="index">
						<view class="shop-info" @click="goPage(index)">
							<view class="img-info">
								<figure>
									<image src="../../static/imgs/coffee.jpg" mode="scaleToFill"></image>
								</figure>
							</view>
							<view class="text-info">
								<text class="text-strong">{{item.name}}</text>
								<text class="text-grey">{{item.categoryName}}</text>
								<text class="text-grey">大/热/无糖</text>
								<text class="text-orange-strong">￥{{item.price}}</text>
							</view>
						</view>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图路径，可以改成网址
				bannerList: [
					'../../../../static/imgs/banner-01.jpg',
					'../../../../static/imgs/banner-02.jpg',
					'../../../../static/imgs/banner-03.jpg',
					'../../../../static/imgs/banner-04.jpg',
				],
				// 商品分类列表
				shopSortList: [],
				// 被选中的分类
				isSelected: 0,
				// 商品列表
				shopList: [],
			}
		},
		methods: {
			// 切换分类选项
			selectSort(index) {
				// 令当前选择的等于被选择的
				this.isSelected = index;
				this.getCoffeList(this.shopSortList[index].id)

			},

			// 前往详情页
			goPage(index) {
				console.log(this.shopList[index],index)
				uni.navigateTo({
					url: "/pages/shop/shop-info/shop-info?info=" + encodeURIComponent(JSON.stringify(this
						.shopList[index]))

				})
			},

			// 获取咖啡分类列表
			getShopSort() {
				this.$ajax.getShopSortList.get().then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "请重新登录",
							icon: "error",
							mask: true
						})
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/login/login"
							})
						}, 1300)
					}
					this.shopSortList = res.data
					this.getCoffeList(this.shopSortList[this.isSelected].id)
				})

			},

			// 获取商品列表
			getCoffeList(id) {
				this.$ajax.getCoffeeShop.get({
					categoryId: id
				}).then(res => {
					this.shopList = res.data
				})
			},
		},
		mounted() {
			this.getShopSort();
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		position: fixed;
		height: 500rpx;
		width: 100%;
	}

	.main {
		display: flex;
		overflow-x: scroll;
		overflow-y: hidden;
		/*解决ios上滑动不流畅*/
		-webkit-overflow-scrolling: touch;


		.left-menu {
			position: fixed;
			background-color: #f7f8fa;
			height: 60%;
			margin-top: 500rpx;
			overflow: auto;


			ul {
				overflow: auto;
				padding-bottom: 120rpx;
			}


			li {
				width: 190rpx;
				height: 100rpx;
				display: block;
				text-align: center;
				line-height: 100rpx;

				&.selected {
					background-color: #fff;
					position: relative;
				}

				&.selected::before {
					content: '';
					position: absolute;
					top: 25rpx;
					left: 0;
					display: block;
					width: 10rpx;
					height: 40rpx;
					background-color: red;
				}
			}
		}

		.right-con {
			margin-top: 500rpx;
			margin-left: 196rpx;
			margin-bottom: 100rpx;
			padding: 10rpx 20rpx 0 20rpx;

			width: 100%;

			li {
				border-bottom: 1px solid #ccc;
				padding: 10rpx;

				.shop-info {
					display: flex;

					.img-info {
						margin-right: 10rpx;

						image {
							width: 166rpx;
							height: 166rpx;
						}
					}

					.text-info {
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.text-strong {
							font-weight: 650;
						}

						.text-grey {
							color: #aaa;
							font-size: 12px;
						}

						.text-orange-strong {
							font-weight: 600;
							color: #ee651b;
						}
					}
				}
			}
		}
	}
</style>
